<script lang="ts" setup>
import { ref } from 'vue';

// 状态管理
const value = ref<string>('');

// 定义向父组件发送的事件
const emit = defineEmits<{
    (e: 'submitReply', reply: string): void;
}>();

// 提交回复
const handleSubmit = () => {
    if (value.value.trim() === '') return;  // 防止空回复

    // 触发事件并传递回复内容到父组件
    emit('submitReply', value.value);

    // 清空回复框内容
    value.value = '';
};
</script>

<template>
    <div class="reply-box">
        <!-- 回复框内容 -->
        <a-avatar src="/public/lijie.svg" alt="Han Solo" />

        <!-- 输入框 -->
        <a-textarea
            v-model:value="value"
            :rows="4"
            placeholder="请输入你的回复..."
        />

        <!-- 提交按钮 -->
        <a-button
            type="primary"
            @click="handleSubmit"
        >
            添加评论
        </a-button>
    </div>
</template>

<style lang="scss" scoped>
.reply-box {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    max-width: 31.25rem;
}
</style>
